<template>
  <moyu-card title="数据源详情">
    <template #option>
      <slot name="header"></slot>
      <el-button size="small" type="success" @click="connectTestHandler">连接</el-button>
      <el-button v-if="detail.id" size="small" type="warning" @click="copyDetail">复制</el-button>
      <el-button v-if="detail.id" size="small" type="danger" @click="deleteDetail">删除</el-button>
      <el-button type="primary" size="small" @click="saveDetail">
        <span v-if="detail.id">保存</span>
        <span v-else>新增</span>
      </el-button>
    </template>
    <template #content>
      <el-form ref="detailForm" :model="detail" :rules="rules" label-width="90">
        <el-form-item prop="name" label="名称">
          <el-input v-model="detail.name"/>
        </el-form-item>
        <el-form-item prop="type" label="类型">
          <el-input v-model="detail.type"/>
        </el-form-item>
        <el-form-item prop="access" label="连接方式">
          <el-input v-model="detail.access"/>
        </el-form-item>
        <el-form-item prop="host" label="主机">
          <el-input v-model="detail.host"/>
        </el-form-item>
        <el-form-item prop="db" label="数据库">
          <el-input v-model="detail.db"/>
        </el-form-item>
        <el-form-item prop="port" label="端口号">
          <el-input v-model="detail.port"/>
        </el-form-item>
        <el-form-item prop="user" label="账号">
          <el-input v-model="detail.user"/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" show-password v-model="detail.password"/>
        </el-form-item>
      </el-form>
      <el-dialog
          v-model="dialogVisible"
          title="连接结果"
          :before-close="handleClose"
      >
      <pre style="overflow-x:auto; overflow-y: auto; max-height: calc(100vh - 500px)">
        <code>
{{connectResult}}
        </code>
      </pre>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
        </template>
      </el-dialog>
    </template>
  </moyu-card>
</template>

<script setup>
import {computed, reactive, ref, toRaw, unref} from "vue";
import {databaseTest, deleteDatabase, postDatabase} from "@/api/kettle/database";
import {ElMessage} from "element-plus";
import MoyuCard from "@/components/MoyuCard/MoyuCard.vue";

const props = defineProps({
  cardDetail: {
    default: {}
  }
})
const emits = defineEmits(['update:cardDetail', 'formChange'])
let oldDetail = ref({})
let detail = computed({
  get(){
    oldDetail = JSON.parse(JSON.stringify(props.cardDetail))
    return props.cardDetail
  },
  set(val){
    emits("update:cardDetail", val)
  }
})

/**
 * 数据校验规则
 * @type {UnwrapNestedRefs<{access: [{trigger: string, message: string, required: boolean}], host: [{trigger: string, message: string, required: boolean}], name: [{trigger: string, message: string, required: boolean}]}>}
 */
const rules = reactive({
  host:[{required: true, message: '请输入主机名称', trigger: 'blur'}],
  name:[{required: true, message: '请输入数据源名称', trigger: 'blur'}],
  access:[{required: true, message: '请确认连接方式', trigger: 'blur'}],
  type: [{required: true, message: '请确认数据源类型', trigger: 'blur'}]
})

/**
 * 详情表单
 * @type {Ref<any>}
 */
const detailForm = ref()
/**
 * 保存
 */
const saveDetail = function (){
  detailForm.value.validate((val)=>{
    if(val){
      postDatabase(detail.value).then(val=>{
        emits("formChange")
      })
    }
  })
}

/**
 * 删除
 */
const deleteDetail = function (){
  if(detail.value.id){
    deleteDatabase(detail.value.id, detail.value).then(val=>{
      detail.value = {}
      emits('formChange')
    })
  }
  else{
    ElMessage({
      message: '未提交的新数据，无法删除',
    })
  }
}

/**
 * 复制
 */
const copyDetail = function (){
  if(detail.value.id){
    detail.value.id=''
  }
}

// 对话框
const dialogVisible = ref(false)
/**
 * 关闭对话框
 */
const handleClose = function () {
  dialogVisible.value=true
}
// 连接结果
const connectResult = ref('')
/**
 * 连接测试
 */
const connectTestHandler = function () {
  databaseTest(detail.value).then(value=>{
    console.log(value)
    connectResult.value = value.data
    dialogVisible.value=true
  })
}
</script>

<style scoped>

</style>